<template>
	<view class="my-swiper-container">
		<view ref="tabbar" class="tabbar-list">
			<view class="tabbar-item" 
			:class="[current === index ? 'active' : '']" 
			@click="changeTabbar(index)"
			:style="{ height: `${height}px`, backgroundColor: bgcolor, color, fontSize: `${size}px` }" v-for="(item, index) in tabbar" :key="index">
				{{ item.label }}
			</view>
			<view class="line" :style="{ width, transform: `translateX(${translateX}px) translatex(-50%)` }"></view>
		</view>
		<view class="swiper-wrapper">
			<swiper :interval="3000" :duration="1000" :current="current" @change="changeCurrent">
				<swiper-item v-for="(item, index) in tabbar" :key="index" class="tabbar-content">
					<view class="tabbar-content-item">
						<view class="title">
							<view class="title-left">
								大疆创新
							</view>
							<view class="title-right">
								交易成功
							</view>
						</view>
						<view class="thing">
							<view class="thing-pic">
								<image src="../../static/uni.png"></image>
							</view>
							<view class="thing-info">
								<view class="thing-name">
									全球购 Nike Air Force 1 Low Shadow 防滑减震耐磨 低帮 板鞋 女款 黑白红
								</view>
								<view class="thing-setting">
									44 数量×1
								</view>
								<view class="pay-price">
									<view class="label">
										实付款
									</view>
									<text class="price">1286.29</text>
								</view>
							</view>
						</view>
					</view>
					<view class="tabbar-content-item">
						<view class="title">
							<view class="title-left">
								大疆创新
							</view>
							<view class="title-right">
								交易成功
							</view>
						</view>
						<view class="thing">
							<view class="thing-pic">
								<image src="../../static/uni.png"></image>
							</view>
							<view class="thing-info">
								<view class="thing-name">
									全球购 Nike Air Force 1 Low Shadow 防滑减震耐磨 低帮 板鞋 女款 黑白红
								</view>
								<view class="thing-setting">
									44 数量×1
								</view>
								<view class="pay-price">
									<view class="label">
										实付款
									</view>
									<text class="price">1286.29</text>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		name:"my-swiper",
		props: {
			tabbar: {
				type: Array,
				default: [],
				require: true
			},
			height: {
				type: String,
				default: '40'
			},
			bgcolor: {
				type: String,
				default: '#fff',
			},
			color: {
				type: String,
				default: '#000'
			},
			size: {
				type: String,
				default: '16px'
			}
		},
		data() {
			return {
				swiperHeight: 0,
				current: 0,
				translateX: 0,
				width: 0,
			}
		},
		mounted() {
			this.lineChange()
		},
		methods: {
			changeTabbar(index) {
				this.current = index
				this.lineChange()
			},
			changeCurrent(e) {
				this.current = e.target.current
			},
			lineChange() {
				uni.getSystemInfo({
					success: (res) => {
						// this.width = (res.screenWidth / this.tabbar.length) / 2
						this.width = (res.screenWidth / this.tabbar.length)
						console.log(res.screenWidth / this.tabbar.length);
						// this.translateX = (res.screenWidth / this.tabbar.length) * this.current
						if(this.current === 0) {
							this.translateX = 60
						}else {
							this.translateX = 200 * this.current
						}
					}
				})
			}
		},
	}
</script>

<style lang="scss">
.my-swiper-container {
	width: 100%;
	height: 100%;
}
.tabbar-list {
	display: flex;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 999;
	.tabbar-item {
		height: 40px;
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		&.active {
			color: #000 !important;
			font-weight: bold;
			transition: .5s all;
		}
	}
	.line {
		width: 30px;
		position: absolute;
		bottom: 8rpx;
		height: 2px;
		background-color: #000;
		transition: .5s all;
		// border-top: #000 solid 2px;
	}
}
.swiper-wrapper {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	swiper {
		width: 100%;
		height: 100%;
		.tabbar-content {
			width: 100%;
			height: 100%;
		}
		.tabbar-content-item {
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			margin-bottom: 20rpx;
			.title {
				font-size: 14px;
				display: flex;
				padding: 20rpx;
				justify-content: space-between;
				border-bottom: 1px solid #f0f0f0;
			}
			.thing {
				display: flex;
				padding: 20rpx 0;
				.thing-pic {
					width: 90px;
					height: 90px;
					box-sizing: border-box;
					border: 1px solid #f0f0f0;
					margin-right: 20rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.thing-info {
					width: 70%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.thing-name {
						font-size: 14px;
						overflow: hidden; //多出的隐藏
						//text-overflow: ellipsis;//多出部分用...代替
						display: -webkit-box; //定义为盒子模型显示
						-webkit-line-clamp: 1; //用来限制在一个块元素显示的文本的行数
						-webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
						margin-bottom: 10rpx;
					}
					.pay-price {
						display: flex;
						// align-items: center;
						.label {
							font-size: 14px;
							margin-right: 10rpx;
						}
						.price {
							font-weight: bold;
							font-size: 16px;
							&::before {
								content: '￥';
								font-weight: bold;
								font-size: 12px;
							}
						}
					}
				}
			}
		}
	}
	
}
</style>